/* 创建组件的步骤：
1、创建组件
2、引入要用的模块
3、导出所创建的组件 */

import React, { Component } from "react";
//类环境与普通环境不同，在类里面不能够控制台输出
export default class Demo extends Component {
    constructor(props) {
        super(props);
        // this.state = {
        //     num: 0,
        //     num1: 0,
        //     num2: 0,
        // }; state是组件上的属性，一般都是对象
    }
    //直接添加属性
    state = {
        num: 0,
        num1: 0,
        num2: 0,
    };
    //方法一定要声明在类当中
    // 事件处理函数里面默认传入的参数是事件对象
    // add = () => {
    //     this.setState({ num: this.state.num + 1 }); //setState方法中传入的参数是对象
    // };
    // add1 = () => {
    //     this.setState({ num1: this.state.num1 + 1 }); //setState方法中传入的参数是对象
    // };
    // add2 = () => {
    //     this.setState({ num2: this.state.num2 + 1 }); //setState方法中传入的参数是对象
    // };
    // handleClick = (type, e) => {
    // if (type == "num") {
    //     this.setState({
    //         num: this.state.num + 1,
    //     });
    // } else if (type == "num1") {
    //     this.setState({
    //         num1: this.state.num1 + 1,
    //     });
    // } else {
    //     this.setState({
    //         num2: this.state.num2 + 1,
    //     });
    // }
    // this.setState({ [type]: this.state[type] + 1 });
    /* 不能直接写type和this.state.type，此时的type是一个参数，
        如果直接写的话会在原来对象上添加一个type属性，需要加中括号才能使用 */
    // };
    curryClick = (type) => {
        return (e) => {
            this.setState({ [type]: this.state[type] + 1 });
        };
    };

    /**
     *页面渲染内容
     * @return {*}
     * @memberof Demo
     */
    render() {
        const { num, num1, num2 } = this.state;
        var rate = ((num / (num + num1)) * 100).toFixed(2);
        if (isNaN(rate)) {
            rate = 0;
        }
        return (
            <div>
                <div>
                    <h1>{this.props.title}</h1>
                    <h2>支持人数:{num}</h2>
                    <h2>反对人数:{num1}</h2>
                    <h2>弃权人数:{num2}</h2>
                    <h3>支持率:{rate}%</h3>
                    {/* <button onClick={this.add}>支持</button>
                    <button onClick={this.add1}>反对</button>
                    <button onClick={this.abandon}>弃权</button> */}
                    <button onClick={this.curryClick("num")}>支持</button>
                    <button onClick={this.curryClick("num1")}>反对</button>
                    <button onClick={this.curryClick("num2")}>弃权</button>
                    {/* <button onClick={(e) => this.handleClick("num", e)}> */}
                    {/* 不能直接将this.handleClick("num")直接写在这里，
                        否则函数直接调用，返回的是undefined，无法达到预期效果 */}
                    {/* 此时handleClick是一个普通函数，事件处理函数是箭头函数 ，
                        如果想使用一些数据一定要传入参数*/}
                    {/* 支持 */}
                    {/* </button> */}
                    {/* <button onClick={(e) => this.handleClick("num1", e)}>
                        反对
                    </button>
                    <button onClick={(e) => this.handleClick("num2", e)}>
                        弃权
                    </button> */}
                </div>
            </div>
        );
    }
}

//!函数柯里化:将一个接收多个参数的函数，变换成只接收单一参数
// 并且返回一个接收其余参数且进行计算处理的函数的一种技术
/* const add = (a, b, c) => {
    return a + b + c;
};
!转换为
const add = (a) => {
    return (b) => {
        return (c) => {
            return a + b + c;
        };
    };
}; 
!简写成 const add= a=> b=> c=> a+b+c;*/

// ?高阶函数：接收一个函数作为参数，或者返回一个函数作为输出的函数
//例如：map、filter、forEach
